<template id="address">
  <div class="content">
    <div class="pc">
      <go-to-back />
      <section class="addresses">
        <div
          class="address"
          v-for="(item, index) in AddressList"
          :key="index"
          :class="{ isDefault: item.isDefault }"
        >
          <div class="addressTop">
            <div class="titleAds">{{ item.title }}</div>
            <div class="defaultAds" v-if="item.isDefault">默认地址</div>
          </div>
          <div class="addressContent">
            <p>
              <span><span style="visibility: hidden;">我</span>收货人：</span
              >{{ item.person }}
            </p>
            <p><span>所在地区：</span>{{ item.area }}</p>
            <p><span>详细地址：</span>{{ item.address }}</p>
            <p><span>联系方式：</span>{{ item.phone }}</p>
            <p><span>固定电话：</span>{{ item.tel }}</p>
            <div class="addressBottom">
              <p><span>电子邮箱：</span>{{ item.email }}</p>
              <div class="deleteBtn" @click="deleteAddress('delete', item)">
                删除
              </div>
              <div
                class="setBtn"
                v-if="!item.isDefault"
                @click="setDefault(item)"
              >
                设为默认
              </div>
              <div class="editBtn" @click="addressEntity('edit', item)">
                编辑地址
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="foot">
        <div class="confirmBtn" @click="addressEntity('new')">新增地址</div>
      </section>

      <!-- 收获地址弹窗 -->
      <EntityAddressDialog
        :options="entityAddressOptions"
        @close="closeEntityAddress"
        @tipShow="showEntityAddressTips"
        @tipHiden="hidenEntityAddressTips"
      />
    </div>
    <div class="phone">
      <div class="adsGroup">
        <div class="adsCard" v-for="(item, index) in AddressList" :key="index">
          <div class="cardLeft">
            <div class="firstLine">
              <p class="areaLine">{{ item.area }}</p>
              <div class="defaultIcon" v-if="item.isDefault">默认</div>
            </div>
            <p class="secondLine">{{ item.address }}</p>
            <div class="thridLine">
              <p class="areaLine">{{ item.person }}</p>
              <p class="areaLine">{{ item.phone }}</p>
            </div>
          </div>
          <div class="cardRight">
            <div class="editBtn">编辑</div>
          </div>
        </div>
      </div>
      <div class="phoneBottomBtn" @click="goToAddressPhone">新增收获地址</div>
    </div>
  </div>
</template>

<script>
import GoToBack from "../../../views/mail/components/category/components/GoToBack.vue";
import EntityAddressDialog from "../personalCollection/EntityAddressDialog.vue";
export default {
  components: {
    GoToBack,
    EntityAddressDialog,
  },
  name: "",
  props: {},
  data() {
    return {
      //兑换实体卡收获地址弹窗
      entityAddressOptions: {
        isShow: false,
        dialogTitle: "",
        myFormList: [
          {
            required: true,
            name: "收货人",
            prop: "person",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "所在地区",
            prop: "area",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "详细地址",
            prop: "address",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "手机号码",
            prop: "phone",
            type: "input",
            value: "",
            text: "number",
            maxLength: 11,
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: false,
            name: "固定电话",
            prop: "tel",
            type: "input",
            value: "",
            tips: "",
            isShowTips: false,
          },
          {
            required: false,
            name: "邮箱地址",
            prop: "email",
            type: "input",
            value: "",
            tips: "请填写正确的",
            isShowTips: false,
          },
        ],
      },
      AddressList: [
        {
          id: 1,
          title: "METAUPXX  北京",
          isDefault: true,
          person: "用户A",
          area: "北京市朝阳区XX街道",
          address: "XXXX街道XX号XXXXXXX",
          tel: "025-58999999",
          phone: "13227663344",
          email: "33412454@metaup.com",
        },
        {
          id: 2,
          title: "METAUPXX  南京",
          isDefault: false,
          person: "用户B",
          area: "南京市浦口区XX街道",
          address: "XXXX街道XX号XXXXXXX",
          tel: "025-58999999",
          phone: "13227663344",
          email: "33412454@metaup.com",
        },
        {
          id: 3,
          title: "METAUPXX  南京",
          isDefault: false,
          person: "用户c",
          area: "南京市浦口区XX街道",
          address: "XXXX街道XX号XXXXXXX",
          tel: "025-58999999",
          phone: "13227663344",
          email: "33412454@metaup.com",
        },
        {
          id: 4,
          title: "METAUPXX  南京",
          isDefault: false,
          person: "用户c",
          area: "南京市浦口区XX街道",
          address: "XXXX街道XX号XXXXXXX",
          tel: "025-58999999",
          phone: "13227663344",
          email: "33412454@metaup.com",
        },
      ],
    };
  },
  computed: {},
  methods: {
    //设置默认地址
    setDefault(item) {},
    //新增、编辑收获地址
    addressEntity(type, value) {
      if (type == "new") {
        this.entityAddressOptions.dialogTitle = "新增收货地址";
      } else {
        this.entityAddressOptions.dialogTitle = "编辑收货地址";
        this.entityAddressOptions.myFormList.map((item, index) => {
          if (item.prop == "person") {
            item.value = value.person;
          } else if (item.prop == "area") {
            item.value = value.area;
          } else if (item.prop == "address") {
            item.value = value.address;
          } else if (item.prop == "phone") {
            item.value = value.phone;
          } else if (item.prop == "tel") {
            item.value = value.tel;
          } else if (item.prop == "email") {
            item.value = value.email;
          }
        });
      }
      this.entityAddressOptions.isShow = true;
    },

    //关闭收货地址
    closeEntityAddress() {
      this.entityAddressOptions.isShow = false;
      this.initEmtityAddress();
    },

    //显示提示
    showEntityAddressTips(payload, type) {
      this.entityAddressOptions.myFormList.map((item, index) => {
        if (item.prop == payload.prop) {
          if (type == "reg") {
            item.tips = "请输入正确的";
          } else {
            item.tips = "请填写";
          }
          item.isShowTips = true;
        }
      });
    },

    //隐藏提示
    hidenEntityAddressTips(payload) {
      this.entityAddressOptions.myFormList.map((item, index) => {
        if (item.prop == payload.prop) {
          item.isShowTips = false;
        }
      });
    },

    //收获地址弹窗初始化
    initEmtityAddress() {
      this.entityAddressOptions.myFormList.map((item, index) => {
        item.isShowTips = false;
        item.value = "";
      });
    },

    //手机跳转收获地址
    goToAddressPhone() {
      this.$router.push("/addressPhone");
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.content {
  margin: 0 auto;
  width: 1200px;
  font-family: PingFangSC-Semibold, PingFang SC;
  margin-top: 40px;
  .pc {
    .foot {
      display: flex;
      justify-content: end;
      margin-top: 40px;
      .confirmBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        width: 215px;
        height: 39px;
        background-image: url("../../../assets/images/pc_black/home/btn_color.png");
        background-position: center center;
        background-size: 100% 100%;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
        line-height: 14px;
        cursor: pointer;
      }
    }

    .notice {
      display: flex;
      color: #fff;
      p {
        font-size: 16px;
      }
      .star {
        font-size: 20px;
        color: #f34c44;
        margin-right: 5px;
        margin-top: 5px;
      }
      .noticeLeft {
        word-break: keep-all;
        white-space: nowrap;
        display: flex;
      }
      .noticeRight {
        margin-left: 30px;
        line-height: 1.5;
      }
    }
    .addBtn {
      text-align: right;
      color: #fff;
      cursor: pointer;
    }
    .addresses {
      margin-top: 20px;
      max-height: 500px;
      overflow-y: scroll;
      .address {
        width: 100%;
        padding: 20px;
        border: 1px dashed #ccc;
        border-radius: 10px;
        margin-bottom: 30px;
        color: #999999;
        .addressTop {
          display: flex;
          align-items: center;
          .titleAds {
            font-size: 20px;
          }
          .defaultAds {
            background-color: #00ffb0;
            padding: 1px 5px;
            margin-left: 10px;
          }
        }
        .addressContent {
          margin-top: 15px;
          font-size: 12px;
          .addressBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            p {
              margin: 0;
            }
            .deleteBtn {
              margin-right: 10px;
              margin-left: auto;
              color: #fff;
              cursor: pointer;
            }
            .setBtn {
              margin-right: 10px;
              color: #fff;
              cursor: pointer;
            }
            .editBtn {
              color: #fff;
              cursor: pointer;
            }
          }
        }
      }
      .isDefault {
        border: 2px solid #ccc;
        color: #fff;
      }
    }
  }
  .phone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .content {
    width: auto;
    padding: 20px 30px 62px 30px;
    .pc {
      display: none;
    }
    .phone {
      display: block;
      color: #ccc;

      .adsGroup {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding: 20px 30px;
        .adsCard {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2px solid #999;
          margin-bottom: 20px;
          .cardLeft {
            .firstLine {
              display: flex;
              margin-bottom: 10px;
              .areaLine {
                margin-right: 10px;
                margin-bottom: 0;
                font-size: 14px;
              }
              .defaultIcon {
                background-color: #00ffb0;
                color: #fff;
                padding: 0 15px;
                font-size: 14px;
              }
            }
            .secondLine {
              font-size: 20px;
            }
            .thridLine {
              font-size: 20px;
              display: flex;
              align-items: center;
              .areaLine {
                margin-right: 50px;
              }
            }
          }
        }
      }
      .phoneBottomBtn {
        margin: 60px 0;
        width: 100%;
        height: 100px;
        background: url("~@/assets/images/invite/phoneLongBtn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
      }
    }
  }
}
</style>
